<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout/default">
<head>
    <meta charset="UTF-8">
    <!-- zTree -->
    <link th:href="@{/css/plugins/ztree/metroStyle/metroStyle.css}" rel="stylesheet" />
    <style>
        .rightMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #eeeeee;
            text-align: left;
            padding: 2px;
        }
        .rightMenu ul li {
            margin: 1px 0;
            padding:5px 12px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #FFF;
            color :#009688
        }

        .rightMenu ul li:hover {
            background-color: #009688;
            color :#FFF
        }
        .rightMenu ul li .iconfont{
            font-size: 12px
        }
    </style>
</head>
<section layout:fragment="content">
    <div class="layui-fluid">
        <div class="layui-row">
            <div class="layui-col-sm2">
                <div id="treeDiv" style="overflow-x: hidden">
                    <div id="treeConfigType" class="ztree"></div>
                </div>
            </div>
            <div class="layui-col-sm10">
                <div class="layui-collapse" lay-accordion>
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title search-colla-title"><i
                                class="icon iconfont icon-circle"></i><span>查询条件</span></h2>
                        <div class="layui-colla-content layui-show">
                            <form id="searchConfigForm" class="layui-form" action="" autocomplete="off">
                                <div class="layui-row layui-col-space30">
                                    <div class="layui-col-sm3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">数据类名</label>
                                            <input id="dcTypeCode" class="layui-input eyc-uppercase" name="dcTypeCode"
                                                   type="text">
                                        </div>
                                    </div>
                                    <div class="layui-col-sm3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">数据可选值</label>
                                            <input class="layui-input eyc-uppercase" name="dcOptionsCn" type="text">
                                        </div>
                                    </div>
                                    <div class="layui-col-sm3">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">&nbsp;</label>
                                            <div class="layui-row">
                                                <button type="button" onclick="refreshData();"
                                                        class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">
                                                    <i class="icon iconfont icon-search"></i>查询
                                                </button>
                                                <button type="button" onclick="clearParams();"
                                                        class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue">
                                                    <i class="icon iconfont icon-reset"></i><span>重置</span>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-form-item eyc-margin-top15">
                        <label class="layui-colla-title"><i
                                class="icon iconfont icon-circle"></i><span>客户列表</span></label>
                    </div>
                    <div id="dataConfigList"></div>
                </div>
            </div>
        </div>
        <div id="rMenu" class="rightMenu">
            <ul>
                <li id="m_add" style=""><i class="icon iconfont icon-add">新增配置</i></li>
                <li id="m_edit"><i class="icon iconfont icon-edit">编辑配置</i></li>
                <li id="m_active" style=""><i class="icon iconfont icon-unlock" th:text="生效"></i></li>
                <li id="m_inActive" style=""><i class="icon iconfont icon-lock" th:text="失效"></i></li>
            </ul>
        </div>
    </div>
    <script th:src="@{/layui/layui.js}"></script>
    <!-- zTree -->
    <script th:src="@{/js/plugins/ztree/jquery.ztree.core.min.js}"></script>
    <script th:src="@{/js/plugins/ztree/jquery.ztree.excheck.min.js}"></script>
    <script th:src="@{/js/plugins/ztree/jquery.ztree.exedit.min.js}"></script>

    <script>
        let config = {
            $table: $('#dataConfigList'),
            $tree:$('#treeConfigType'),
            $dcType:$('#dcTypeCode'),
            $rMenu:$("#rMenu")
        };
        let calcTableHeight = ($tableContainer) => {
            var paddingTop = $('body').css('padding-top');
            var bodyPaddingHeight = paddingTop.replace(/[^0-9]/ig, "");
            var height = $(window).height() - $tableContainer.offset().top - $(window).scrollTop() - bodyPaddingHeight;
            return height;
        };
        let initDataConfigTable = () => {
            let colModel = [
                {
                    align: "center",
                    cb: {header: true, select: true, all: false},
                    type: 'checkbox',
                    dataType: 'bool',
                    editor: false,
                    sortable: false,
                    minWidth: 50,
                    width: 50
                }
                , {
                    dataIndx: 'dcTypeCode',
                    title: '数据类编码',
                    editable: false,
                    align: "center",
                    minWidth: 180
                }
                , {dataIndx: 'dcTypeName', title: '数据类名', editable: false, align: "center", minWidth: 180}
                , {dataIndx: 'dcOptions', title: '数据可选值', editable: false, align: "center", minWidth: 180}
                , {dataIndx: 'dcOptionsCn', title: '数据可选值(中文)', editable: false, align: "center", minWidth: 180}
                , {
                    dataIndx: 'isFavourite',
                    title: '是否常用',
                    editable: false,
                    align: "center",
                    minWidth: 100,
                    render: function (ui) {
                        if (ui.cellData) {
                            return '是';
                        }
                        return '否';
                    }
                }
                , {
                    dataIndx: 'disable',
                    title: '是否有效',
                    editable: false,
                    align: "center",
                    minWidth: 120,
                    render: function (ui) {
                        if (ui.cellData) {
                            return '无效';
                        }
                        return '有效';
                    }
                }
            ];

            let option = {
                width: '100%',
                dataModel: {
                    recIndx: "dataConfigId",
                    contentType: "application/json;charset=UTF-8",
                    location: "remote",
                    dataType: "JSON",
                    method: "POST",
                    url: "/eyc/searchDataConfigs",
                    postData: eyc.pqGrid.searchParam,
                    getData: eyc.pqGrid.dataResponse,
                    error: eyc.ajax.ajaxError
                },
                pageModel: {
                    type: "remote",
                    rPP: 50,
                    curPage: 1,
                    rPPOptions: [50, 100, 200]
                },
                sortModel: {
                    type: 'remote',
                    single: true
                },
                colModel: colModel,
                searchFormId: "#searchConfigForm",
                scrollModel: {autoFit: false},
                showTop: false,
                numberCell: {show: false},
                virtualX: false,
                virtualY: true,
                wrap: false,
                height: calcTableHeight(config.$table),
                selectionModel: {type: 'cell',/*toggle: true,*/ mode: "single"}
            };
            eyc.pqGrid.init(config.$table, option);
        };

        let initConfigTypeTree=(data)=>{
            let setting = {
                check : {
                    enable : false,
                    chkboxType : {
                        "Y" : "ps",
                        "N" : "s"
                    }
                },
                data : {
                    simpleData: {
                        enable:true
                    },
                    key : {
                        name : "name"
                    }
                },
                edit : {
                    enable : false,
                },
                callback : {
                    onClick : 	function(event, treeId, treeNode){
                       eyc.ui.setValueUiElement($('form'),{dcTypeCode:treeNode.code});
                       config.$dcType.selectPageRefresh();
                       refreshData();
                    },
                    onRightClick: function(event, treeId, treeNode) {
                        let level = -1;
                        if(treeNode)
                            level = treeNode.level;
                        if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                            config.$tree.cancelSelectedNode();
                            showRMenu(level, event.clientX, event.clientY);
                        } else if (treeNode && !treeNode.noR) {
                            config.$tree.selectNode(treeNode);
                            showRMenu(level, event.clientX, event.clientY, treeNode);
                        }
                    }
                },
                view: {
                    fontCss: function(treeId, treeNode) {
                        return treeNode.isActive ? {} : { color: "#FF5722" };
                    }
                }

            };
            let blankNode = {id : "blank", name:"数据类名", open:true, isActive:true, children:data};
            let typeNodes = [blankNode];
            config.$tree=$.fn.zTree.init(config.$tree, setting, typeNodes);
        };
        let showRMenu = (leve, x, y, treeNode) => {
            $("#rMenu ul").show();
            if (leve == -1) {
                return;
            } else {
                if (leve == 0) {
                    $("#m_add").show();
                    $("#m_edit").hide();
                    $("#m_active").hide();
                    $("#m_inActive").hide();
                } else {
                    $("#m_add").hide();
                    if (treeNode.isActive) {
                        $("#m_active").hide();
                        $("#m_inActive").show();
                    } else {
                        $("#m_active").show();
                        $("#m_inActive").hide();
                    }
                    $("#m_edit").show();
                }
            }
            y += document.body.scrollTop;
            x += document.body.scrollLeft;
            config.$rMenu.css({"top": y + "px", "left": x + "px", "visibility": "visible"});
            $("body").bind("mousedown", onBodyMouseDown);
        };
        let hideRMenu=()=> {
            if (config.$rMenu) config.$rMenu.css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        };

        let onBodyMouseDown=(event)=>{
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
                config.$rMenu.css({"visibility" : "hidden"});
            }
        };
        layui.use(['form'], function () {
            let form = layui.form;
            initDataConfigTable();
        });
        eyc.ajax.promise('/eyc/configTypeEnums', {method: 'GET',enumName:'ConfigTypeEnum'}).then(res => {
            config.$dcType.selectPage({
                showField: 'name',
                keyField: 'code',
                data: res.data
            });
            initConfigTypeTree(res.data);
        });
        let clearParams = function () {
            eyc.ui.clearValueUiElement($('form'));
        };
        window.refreshData = function () {
            config.$table.pqGrid("refreshDataAndView");
        };
    </script>
</section>
</html>